<template>
    <div class="gnerv-login">
        <el-form class="gnerv-login-form" :model="loginForm">
            <el-form-item>
                <el-input ref="account" v-model="loginForm.account" type="text" placeholder="account"
                          @keyup.enter.native="handleLogin"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="loginForm.password" type="password" placeholder="password"
                          @keyup.enter.native="handleLogin"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%" type="primary" @click="handleLogin"
                           @keyup.enter.native="handleLogin">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

  import {userLogin} from "../../api/manage/login"

  import router from '../../router'

  export default {
    name: "Login",
    data () {
      return {
        loginForm: {
          account: 'admin',
          password: '123456'
        },
        newLoginForm: {},
        kaptchaUrl: ""
      }
    },
    methods: {
      handleLogin () {
        userLogin(this.loginForm).then(response => {
          if (response.code == 200) {
            router.push({path: '/'})
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    created () {
      this.$nextTick(function () {
        this.$refs.account.focus()
      })
    }
  }
</script>

<style scoped>
    .gnerv-login {
        width: 100%;
        height: 100%;
        background-color: #2c3e50;
    }

    .gnerv-login-form {
        margin: 0 auto;
        padding-top: 20%;
        width: 300px;
    }
</style>